<template>
    <div id='financial'>
        <div class="cont">
            <el-card class="box-card" >
                <el-date-picker                        
                      type="daterange"
                      range-separator="至"
                      @change="pickTime"
                      start-placeholder="开始日期"
                      format="yyyy-MM-dd"
                      v-model="birthdayName"
                      value-format="yyyy-MM-dd"
                      end-placeholder="结束日期">
                </el-date-picker>
                <!--  -->
              </el-date-picker>
                <el-button type="primary" size="small" class="search" @click="search">查询</el-button>
                <el-button type="primary" size="small" class="out" @click="goout">导出</el-button>
            </el-card>
            <el-card class="box-card boxcatwo">
                <div class="boxcatwo-top">
                    <div class="bt-l">
                        <span style="font-weight:600;">放款总额:</span>
                        <span v-text="totalLendAmount/100"></span>
                        <span>元</span>
                    </div>
                     <div class="bt-l">
                        <span  style="font-weight:600;">还款总额:</span>
                        <span v-text="totalRepayAmount/100"></span>
                        <span>元</span>
                    </div>
                </div>
                
                <el-table
                    :data="dataArr"
                    stripe
                    style="width: 100%">
                    <el-table-column
                      prop="dateTime"
                      :formatter="dateFormat1"
                      label="日期"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="lendCount"
                      label="放款笔数"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="lendAmount"
                      :formatter="ccn"
                      label="借款金额(元)">
                    </el-table-column>
                    <el-table-column
                     prop="lendRealAmount"
                     :formatter="ccn"
                     label="放款金额(元)">
                   </el-table-column>
                   <el-table-column
                     prop="lendServiceAmount"
                     :formatter="ccn"
                     label="服务费(元)">
                   </el-table-column>
                   <el-table-column
                     prop="repayCount"
                     label="还款笔数">
                   </el-table-column>
                   <el-table-column
                     prop="repayAmount"
                     :formatter="ccn"
                     label="还款总收入">
                   </el-table-column>
                   <el-table-column
                     prop="repayPrincipal"
                     :formatter="ccn"
                     label="本金收入">
                   </el-table-column>
                   <el-table-column
                     prop="repayServiceAmount"
                     :formatter="ccn"
                     label="服务费收入">
                   </el-table-column>
                   <el-table-column
                     prop="repayOverAmount"
                     :formatter="ccn"
                     label="逾期费收入">
                   </el-table-column>
                   <el-table-column
                     prop="repayExtendAmount"
                     :formatter="ccn"
                     label="展期收入">
                   </el-table-column>
                   <el-table-column
                     prop="overdueAmount"
                     :formatter="ccn"
                     label="减免金">
                   </el-table-column>
                </el-table>
                
                 <el-pagination class="pan" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[12,50, 100, 200]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" 
                 :total="totalCount" :background="true">
                </el-pagination>
            </el-card>
        </div>
        <!-- -->
        
    </div>
</template>
<script>
import  { mapGetters, mapActions }  from 'vuex'
import Storage from '../utils/storage'
import { financialApi }from '../api/api'
import moment from 'moment'
export default{

    data(){
        return{
            currentPage:1,
            birthdayName:"",
            tableData:[],
            session:'',
            pageIndex:1,
            pageSize:12,
            dataArr:[],
            lendTimeFrom:"",
            lendTimeTo:"",
            datetime:"",
            datetime1:"",
            size:12,
            totalCount:100,
            totalLendAmount:0.00,
            totalRepayAmount:0.00,
        }
    },
    methods:{
      ...mapActions([
                'setSessionId'
            ]),
        handleSizeChange(val){
            console.log(`每页 ${val} 条`);
            this.pageSize=val;
            this.init();
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
            this.pageIndex=val;
            this.init();
        },
        dateFormat1:function(row, column) { 
          var date = row[column.property]; 
           if (date == undefined) { 
             return "--"; 
           } 
           return moment(date).format("YYYY-MM-DD"); 
        }, 
        init(){
          let params={
            sessionId:this.session,
            pageIndex:this.pageIndex,
            pageSize:this.pageSize,
            lendTimeFrom:this.lendTimeFrom,
            lendTimeTo:this.lendTimeTo,
            totalCount:this.totalCount
          }
          financialApi.financialAjax(params)
          .then(data =>{
            this.size=data.pageSize;
            this.totalCount=data.totalCount;
            this.dataArr=data.records
            for( item in this.dataArr){
                if(this.dataArr[item] == "" || this.dataArr[item] == null){
                    this.dataArr[item]="--"
                }
            }
          })
        },
        search(){
            
            if(this.datetime1!=""){
              if((new Date().getTime())-(this.datetime)>2000){
                  this.pageIndex=1;
                  this.init();
              }
          }else{
                this.pageIndex=1;
                this.init();
          }
          this.datetime=new Date().getTime();
        },
        pickTime(data){
            console.log(data)
            if(data){
              this.lendTimeFrom=data[0]
              this.lendTimeTo=data[1]
            }else{
              this.lendTimeFrom=""
              this.lendTimeTo=""
            }
            
        },
        goout(){
          if(this.datetime!=""){
              if((new Date().getTime())-(this.datetime)>2000){
                  this.gooutFn()
              }
          }else{
              this.gooutFn()
          }
          this.datetime=new Date().getTime();
          
        },
        gooutFn(){
            let params={
                  sessionId:this.session,
                  pageIndex:this.pageIndex,
                  pageSize:this.pageSize,
                  lendTimeFrom:this.lendTimeFrom,
                  lendTimeTo:this.lendTimeTo,
                }
                financialApi.downTfinanceDataListAjax(params)
                .then(data =>{
                  window.location.href=data.downloadUrl
                })
        },
        ccn(row, column, cellValue){
          if(cellValue!=0){
             return (cellValue/100)
          }else{
            return cellValue
          }
        }
    },
    mounted(){
      this.session=Storage.get('51SjdAdmin_sessionId')
      this.init();
      financialApi.getTfinanceAmountAjax()
      .then(data=>{
          this.totalLendAmount=data.totalLendAmount;
          this.totalRepayAmount=data.totalRepayAmount;
      })
    },
    created(){
      
    },
}
</script>
<style >
    .el-date-editor .el-range__icon{
       line-height:26px !important;
        height:26px !important;
    }
    .el-date-editor .el-range-separator{
        line-height:26px!important;
    }
</style>
<style lang="scss" scoped>

@import "../sass/variables";
      // .pan,.el-pagination{
      //   float: right;
      //   min-width: 800px!important;
      // }
    
    .el-range-editor.el-input__inner{
        margin:0px 0px!important;
    }
  .el-input{
    width:140px!important;
    height:32px;
    border-radius: 4px!important;
   }
   
    .box-card{
        margin:0px 10px;
    }
    .boxcatwo{
        min-height:350px;
        margin-top:20px;
        .is-in-pagination{
        width:100px!important;
        height:32px;
        border-radius: 4px!important;
       }
    }
    .financial{
        background: red;
        height:100%;
        width:100%;
    }
    .cont{

    }
    .search{
        margin-left:20px;
        position: relative;
        
    }
    .out{
        position: relative;
    }
    .boxcatwo-top{
        height:50px;
    }
    .bt-l{
        float:left;
        margin-right:40px;
        color:$fontcolor;
    }
     .pan{
        margin-top:20px;
    }
</style>